<template>
  <div class="audit_detail">
    <div class="audit_content">
      <div class="examine-header">
        <h4>会员折扣设置-瑞可丽医疗器械</h4>
      </div>

      <div class="audit-record">
        <div class="record_table">
          <el-table :data="memberData.examineList">
            <el-table-column type="index" label="序号" width="150"></el-table-column>
            <el-table-column prop="memberName" label="会员等级名称" />
            <el-table-column prop="discountRate" label="折扣比例">
              <template #default="{ row }">
                {{ row.discountRate / 100 }}%
              </template>
            </el-table-column>
            <el-table-column prop="memberItemList" label="参与采购商">
              <template #default="{row}">
                <div class="memberNameStyle">
                  <el-tag v-if="row.memberItemList.length >= 1" style="margin-right: 40px">
                    {{ row.memberItemList[0].customerName }}
                  </el-tag>
                  <el-tooltip placement="left" effect="light">
                    <template #content>
                      <div class="scrollStyle">
                        <div class="tooltipTitle">会员名称</div>
                        <div class="tooltipStyle">
                          <div v-for="(item) in row.memberItemList" style="margin: 10px 0">
                            <img src="@/assets/images/paixu.png" />
                            <el-tag style="margin-left: 10px">{{ item.customerName }}</el-tag>
                          </div>
                        </div>
                      </div>
                    </template>
                    <img v-show=" row.memberItemList.length > 1" src="@/assets/images/bottom.png" />
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <div class="audit-record">
        <h4>审核记录</h4>
        <div class="record_table">
          <el-table :data="memberData.recordList">
            <el-table-column prop="companyName" label="供应商"></el-table-column>
            <el-table-column prop="createTime" label="申请时间">
              <template #default="{row}">
                {{ formater.formatDate(row.createTime) }}
              </template>
            </el-table-column>
            <el-table-column prop="auditTime" label="审核时间">
              <template #default="{row}">
                {{ row.auditTime ? formater.formatDate(row.auditTime) : '' }}
              </template>
            </el-table-column>

            <el-table-column prop="operateType" label="审核状态">
              <template #default="{ row }">
                <!-- 1已通过  PASS(1),  2审核中 AUDITING 3被驳回 REJECTED 待审核 WAITING_AUDIT -->
                <el-link :type="typeFun( row.operateType,'style' )" :underline="false">
                  {{ typeFun(row.operateType, 'text') }}
                </el-link>
              </template>
            </el-table-column>

            <el-table-column label="操作">
              <template #default="{ row }">
                <el-tooltip placement="left" effect="light">
                  <template #content>
                    <div class="scrollStyle">
                      <el-scrollbar min-height="160px">
                        <h4>驳回备注</h4>
                        <div class="tooltipStyle">
                          <el-input
                            v-model="row.remark"
                            disabled
                            :autosize="{ minRows: 3, maxRows: 4 }"
                            type="textarea"
                            placeholder="暂无"
                          />
                        </div>
                      </el-scrollbar>
                    </div>
                  </template>
                  <!-- REJECT  PASS COMMIT -->
                  <Link v-show="row.operateType === 'REJECT'" label="查看驳回备注" :underline="false" />
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div v-if="status==='AUDITING'" class="audit_button">
      <Button type="primary" label="通过" @click="onPassClick" />
      <Button type="primary" label="驳回" @click="rejectVisible = true" />
    </div>
  </div>

  <el-dialog  v-model="rejectVisible" :close-on-click-modal="false" :show-close="false"
             :close-on-press-escape="false" width="420px">
    <div class="detailDialog">驳回理由</div>
    <el-form :status-icon="true" :show-message="false">
      <el-form-item prop="remark" required>
        <el-input
          class="remark_input"
          v-model="memberData.remark"
          :autosize="{ minRows: 2, maxRows: 4 }"
          type="textarea"
          placeholder="请输入驳回原因"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <Button label="取消" @click="onCancelClick" />
      <Button type="primary" label="确定" @click="onSureClick" />
    </template>
  </el-dialog>
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import api from '@/api'
import formater from '@/formater'
import Button from '@/components/button/button.vue'
import Link from '@/components/button/link.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import Reject from '@/components/reject/index.vue'

/**********************************************/
const rejectVisible = ref(false)
const route = useRoute()
const router = useRouter()
const supplierId = route.params.id
const status = route.params.status
const memberData = reactive({
  examineList: [], // 目前审核列表
  recordList: [], // 审核记录
  remark: '' // 驳回原因
})
const loadData = async () => {
  let { data, err } = await api.get(`/medinstrument/boss/member/getApplyMemberList?supplierId=${supplierId}`)
  if (err) {
    ElMessage.error(err)
    return
  }
  memberData.examineList = data.memberList
  memberData.recordList = data.operateList
}
const onPassClick = async () => {
  ElMessageBox.confirm(
    '确定通过审核吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(async () => {
      const params = {
        'operateType': 'PASS',
        'supplierId': supplierId
      }
      const { data, err } = await api.post('/medinstrument/boss/member/auditMember', params)
      if (err) {
        ElMessage.error(err)
        return
      }
      await loadData()
      ElMessage({
        type: 'success',
        message: '已通过'
      })
      let { href } = router.resolve({
        path: `/supplier/member`
      })
      window.open(href, '_self')
    })
    .catch(() => {
    })
}

const onCancelClick = () => {
  memberData.remark = ''
  rejectVisible.value = false
}
const onSureClick = async () => {
  if (memberData.remark.trim() === '') {
    ElMessage.error('驳回原因不能为空')
    memberData.remark = ''
    return
  }
  const params = {
    operateType: 'REJECT',
    supplierId: supplierId,
    remark: memberData.remark
  }
  const { data, err } = await api.post('/medinstrument/boss/member/auditMember', params)
  if (err) {
    ElMessage.error(err)
  }
  memberData.remark = ''
  await loadData()
  rejectVisible.value = false
  let { href } = router.resolve({
    path: `/supplier/member`
  })
  window.open(href, '_self')
}
const typeFun = (operateType, type) => {
  if (type === 'style') {
    return operateType === 'PASS' ? 'primary' : operateType === 'COMMIT' ? 'success' : 'danger'
  } else {
    return operateType === 'PASS' ? '已通过' : operateType === 'COMMIT' ? '审核中' : '被驳回'
  }
}

onMounted(() => {
  loadData()
})
/**********************************************/
</script>

<style scoped lang="scss">
.detailDialog {
  font-size: 18px;
  color: #303133;
  font-weight: 600;
  margin-bottom: 20px;
}
.rejectForm {
  padding: 0 15px;

  .remark_input {
    width: 390px;
    height: 70px;
  }
}

.memberNameStyle {
  display: flex;
  align-items: center;
}

.scrollStyle {
  min-width: 260px;
  padding-bottom: 10px;
}

.tooltipTitle {
  font-size: 16px;
  color: #303133;
  letter-spacing: 0;
  line-height: 16px;
  font-weight: 500;
}

.audit_detail {
  .audit_content {
    margin: 0 15px 10px 10px;
  }

  .examine-header {
    margin-top: 10px;
    background-color: #fff;
    padding: 10px;
    display: flex;
    align-items: center;
    width: 100%;
    height: 56px;
  }
}

.audit-record {
  padding: 10px 80px 20px 20px;
  margin: 10px 0;
  background-color: #fff;

  .title {
    line-height: 20px;
    font-size: 16px;
    font-weight: 500;
  }

  .record_table {
    margin-top: 20px;

    .el-table {
      :deep(tr) {
        th,
        td {
          border-right: 0;
        }

        th {
          background-color: #fafafa;
        }
      }

      :deep(tr):hover {
        background-color: #f5f7fa;
      }

      :deep(thead) {
        font-size: 14px;
        color: var(--span-color-text);
        line-height: 16px;
        height: 47px;
      }

      :deep(tbody) {
        tr {
          height: 53px;
        }
      }
    }
  }
}
</style>
